<template>
    <div class="header row bg-4 cr-1 fs-1">
        <div class="header-left">天猫优惠券，优惠多多，福利多多</div>
        <div class="header-right">
            <ul class="row">
                <li><a >注册</a></li>
                <li @click="login"><a >登录</a></li>
                <li><a >合作代理</a></li>
                <li><a >帮助中心</a></li>
                <li><a >查询授权</a></li>
            </ul>
        </div>

       <Login :show="show"/>
    </div>
</template>
<script>
import Login from "@/components/Login.vue";
export default {
  name: "home",
  data() {
    return {
      show: false
    };
  },
  components: {
    Login: Login
  },
  mounted() {},
  created() {},
  methods: {
    login() {
      console.log("执行成功");
      this.show = true;
    }
  }
};
</script>



<style lang="less" scoped>
.header {
  justify-content: space-between;
  padding: 0 10vw;
  height: 40px;
}
.header-left {
  line-height: 40px;
}
.header-right ul li {
  list-style: none;
  height: 40px;
  transition: all 1s ease-in;
}

.header-right ul li a {
  display: block;
  height: 16px;
  line-height: 16px;
  padding: 0 10px;
  border-right: 2px solid #fff;
  text-decoration: none;
  color: #fff;
  margin-top: 12px;
  transition: all 1s ease-in;
}
.header-right ul li:hover {
  background-color: #3fb2ef;
}
.header-right ul li:hover a {
  color: red;
}
</style>
